<template>
    <div>
      <div class="top-panel">
        <el-card>
          <el-form :model="searchForm" label-width="70px" label-position="right">
            <el-row>
              <el-col :span="6">
                <el-form-item label="编号">
                  <el-input
                    class="password-input"
                    v-model="searchForm.activityIdFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="名称">
                  <el-input
                    class="password-input"
                    v-model="searchForm.titleFuzzy"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="类型">
                  <el-input
                    class="password-input"
                    v-model="searchForm.type"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="状态">
                  <el-input
                    class="password-input"
                    v-model="searchForm.status"
                    clearable
                    placeholder="支持模糊搜索"
                    @keyup.enter="loadDataList"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" style="margin-top: 10px;">
                  <el-form-item label="活动起始日期 :" label-width="120px">
                    <el-date-picker
                      v-model="searchForm.startTimeDateRange"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      value-format="YYYY-MM-DD HH:mm:ss"
                      @change="loadDataList"
                    ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="4" :style="{  paddingLeft: '10px',paddingTop:'10px' }">
                <el-button type="success" @click="loadDataList()"
                  >查询
                </el-button>
                <el-button
                    v-if="userInfo.roleType==1"
                  type="primary"
                  @click="showEdit()"
                  >新增活动
                </el-button>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
      <el-card class="table-data-card">
        <template #header>
          <span style="font-weight: bolder; color: rgb(29, 32, 136);">活动列表</span>
        </template>
        <Table
          ref="tableInfoRef"
          :columns="columns"
          :fetch="loadDataList"
          :dataSource="tableData"
          :options="tableOptions"
          :extHeight="tableOptions.extHeight"
        >
          <template #slotStatus="{ index, row }">
            <div class="row-op-panel">
              <Badge showType="black" text="草稿" v-if="row.status == 0"></Badge>
              <Badge showType="yellow" text="待启动" v-if="row.status == 1"></Badge>
              <Badge showType="green" text="进行中" v-if="row.status == 2"></Badge>
              <Badge showType="red" text="已结束" v-if="row.status == 3"></Badge>
            </div>
          </template>

          <template #roleTypeSlots="{ index, row }">
            <div class="row-op-panel">
              <Badge showType="green" text="学生" v-if="row.roleType == 0"></Badge>
              <Badge showType="blue" text="平台管理员" v-if="row.roleType == 1"></Badge>
              <Badge showType="black" text="后台管理员" v-if="row.roleType == 2"></Badge>

            </div>
          </template>

          <template #slotOperation="{ index, row }" >
            <div
              class="row-op-panel"
              v-if="userInfo.roleType==1"
            >
              <a
                class="a-link"
                v-if="row.status==0"
                href="javascript:void(0)"
                @click="showEdit(row)"
                >编辑</a
              >
              <a
                v-else
                class="a-link"
                style="color: rgb(170, 176, 182);"
                href="javascript:void(0)"
                >编辑</a
              >
              <a
                class="a-link"
                href="javascript:void(0)"
                @click.prevent="deleteActivity(row)"
                >删除</a
              >

              <a
               v-if="row.status==0"
                class="a-link"
                style="color: rgb(170, 176, 182);"
                href="javascript:void(0)"
                >详情</a
              >

              <a
                v-else
                class="a-link"
                href="javascript:void(0)"
                @click.prevent="showDetail(row)"
                >详情</a
              >

              <a
                class="a-link"
                v-if="row.status==0"
                href="javascript:void(0)"
                @click.prevent="updateStatus(row,1)"
                >发布</a
              >
              <a
                class="a-link"
                v-if="row.status==1"
                href="javascript:void(0)"
                @click.prevent="updateStatus(row,2)"
                >启动项目</a
              >
              <a
                class="a-link"
                href="javascript:void(0)"
                v-if="row.status==2"
                @click.prevent="updateStatus(row,3)"
                >结束项目</a
              >


            </div>
          </template>
        </Table>
      </el-card>
      <ActivityEdit ref="activityEditRef" @reload="loadDataList"></ActivityEdit>

    </div>
  </template>

  <script setup>
import { useRouter, useRoute } from "vue-router";
import ActivityEdit from "./ActivityEdit.vue";
  import { getCurrentInstance, nextTick, ref } from "vue";
  const { proxy } = getCurrentInstance();

  const userInfo = ref(proxy.VueCookies.get("userInfo") || {});
  const router = useRouter();
  const route = useRoute();
  const api = {
    loadDataList: "/activityInfo/loadActivityList",
    deleteByBookId: "/activityInfo/delActivity",
    updateStatus: "/activityInfo/updateStatus",
    saveReservation:"/activityInfo/saveActivity",
  };
  const searchForm = ref({});

  const tableData = ref({});
  const tableOptions = ref({
    extHeight: 125,
  });

  const columns = [
    {
      label: "活动编号",
      prop: "activityId",
      width:140,
    },
    {
      label: "名称",
      prop: "title",
    },
    {
      label: "创建人",
      prop: "createUserName",
    },
    {
      label: "分类",
      prop: "type",
    },
    {
      label: "地址",
      prop: "location",
    },
    {
      label: "招募人数",
      prop: "maxParticipants",

    },
    {
      label: "开始时间",
      prop: "startTime",
    },
    {
      label: "结束时间",
      prop: "endTime",
    },
    {
      label: "状态",
      scopedSlots: "slotStatus",
    },
    {
      label: "最后更新时间",
      prop: "lastUpdateTime",
    },
    {
      label: "操作",
      prop: "operation",
      width: 250,
      scopedSlots: "slotOperation",
    },
  ];

  const tableInfoRef = ref();

  const loadDataList = async () => {
    let params = {
      pageNo: tableData.value.pageNo,
      pageSize: tableData.value.pageSize,
    };
    if (searchForm.value.startTimeDateRange) {
      params.startTimeStart = searchForm.value.startTimeDateRange[0];
      params.startTimeEnd = searchForm.value.startTimeDateRange[1];
  }
  delete params.startTimeDateRange;
    Object.assign(params, searchForm.value);
    let result = await proxy.Request({
      url: api.loadDataList,
      params: params,
    });
    if (!result) {
      return;
    }
    Object.assign(tableData.value, result.data);
  };

  //删除
  const deleteActivity = (data) => {
    proxy.Confirm(`确定要删除【${data.title}】吗？`, async () => {
      let result = await proxy.Request({
        url: api.deleteByBookId,
        params: {
          activityId: data.activityId,
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("操作成功");
      loadDataList();
    });
  };

  const updateStatus = (data,status) => {
    let tips=status==1?"通过审核":(status==2?"启动项目":(status==3?"结束项目":""));

    proxy.Confirm(`确定要-${tips}-【${data.title}】吗？`, async () => {
      let result = await proxy.Request({
        url: api.updateStatus,
        params: {
          activityId: data.activityId,
          status:status
        },
      });
      if (!result) {
        return;
      }
      proxy.Message.success("操作成功");
      loadDataList();
    });
  };

  // 显示活动详情
  const showDetail=(data)=>{
     // TODO
     router.push(`/site/projectInfo?activityId=${data.activityId}`);
  }


  const activityEditRef = ref();
  const showEdit = (data = {}) => {
    activityEditRef.value.showEdit(Object.assign({}, data));
  };


  </script>

  <style lang="scss" scoped>
  .detail-tree-panel {
    height: calc(100vh - 273px);
    overflow: auto;
    width: 100%;
  }

  </style>
